<template>
  <div>
    <div class="xianshi">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="fu">
      <div id="main1" style="width:500px;height:500px;"></div>
      <div class="zi">
        <h4>酬金政策介绍</h4>
        <ul>
          <li>
            移动公司渠道酬金系统管理法(试行)―为有效监控渠道酬金利用效率，使各类酬金落实到位，根据目前我公司酬金执行标准及新酬金系统操作方式，特制定本办法。一、制定目的――新酬金系统上线应用后，全省将实行统酬金结算、酬金电子报账流程，减少中间环节及手工计算数据，使酬金直接落实到渠道代理商手中，体现酬金的准确性及直观性。
          </li>
          <li>
            (1)负责渠道基础资料维护，负责各渠道网点代理商信息的增加、修改及删除，负责各类网点基础资料的增加、修改及删除
          </li>
          <li>
            (2)负责EIP系统中渠道网点账户信息维护，及时更新EIP系统中变更操作，必须当月26日前完成。2、州公司市场部职责
          </li>
          <li>1.酬金政策的制定</li>
          <li>2.渠道资料审核</li>
          <li>3.酬金系统维护、操作培训、操作指导工作</li>
          <li>4.酬金系统中各类酬金数据配置工作......</li>
        </ul>
      </div>
    </div>
    <div id="main" style="width:1300px;height:500px;"></div>
  </div>
</template>

<script>
var echarts = require("echarts");
export default {
  data() {
    return {
      graph_data: {},
    };
  },
  mounted() {
    /*ECharts图表*/
    var chartDom = document.getElementById("main");
    var myChart = echarts.init(chartDom);
    var option;

    var data = [];
    for (let i = 0; i < 5; ++i) {
      data.push(Math.round(Math.random() * 0.1));
    }

    option = {
      xAxis: {
        max: "dataMax",
      },
      yAxis: {
        type: "category",
        data: ["4g全套餐", "动感地带", "5g全套餐", "大王卡", "神州行"],
        inverse: true,
        animationDuration: 4,
        animationDurationUpdate: 4,
        max: 4, // only the largest 3 bars will be displayed
      },
      series: [
        {
          realtimeSort: true,
          name: "地区套餐使用人数",
          type: "bar",
          data: data,
          label: {
            show: true,
            position: "right",
            valueAnimation: true,
          },
        },
      ],
      legend: {
        show: true,
      },
      animationDuration: 3000,
      animationDurationUpdate: 3000,
      animationEasing: "linear",
      animationEasingUpdate: "linear",
    };

    function update() {
      var data = option.series[0].data;
      for (var i = 0; i < data.length; ++i) {
        if (Math.random() > 0.9) {
          data[i] += Math.round(Math.random() * 1);
        } else {
          data[i] += Math.round(Math.random() * 2);
        }
      }
      myChart.setOption(option);
    }

    setInterval(function() {
      update();
    }, 3000);

    option && myChart.setOption(option);

    let charDom1 = document.getElementById("main1");
    let mychart1 = echarts.init(charDom1);
    let opinionData1;
    opinionData1 = {
      title: {
        name: "税率表",
        subtext: "套餐",
        left: "center",
      },
      tooltip: {
        trigger: "item",
      },
      legend: {
        orient: "vertical",
        left: "left",
      },
      series: [
        {
          name: "流量卡类型",
          type: "pie",
          radius: "50%",
          data: [
            { value: 1048, name: "神州行" },
            { value: 735, name: "大王卡" },
            { value: 580, name: "动感地带" },
            { value: 484, name: "4g全套餐" },
            { value: 300, name: "5g全套餐" },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
    };

    opinionData1 && mychart1.setOption(opinionData1);
  },
  methods: {},
};
</script>

<style scoped>
.fu {
  overflow: hidden;
}
#main1 {
  float: left;
}
ul li{
  text-align: left;
  margin: 10px 5px 5px 10px;
}
ul>li:first-child{
  margin-top:30px;
}
.zi{
  margin-top:20px ;
}
</style>
